Js bootstrapvalidator.js，from表单提交验证

发表于 | 次阅读
字数统计: 1,065 字 | 阅读时长 ≈ 6 min

下载地址

bootstrap-treeview 中文开发手册

github地址

使用

依赖

调用

1
2
3
4
5
6
7
8
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://wjikai.gitee.io/myresoursce/js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://wjikai.gitee.io/myresoursce/js/jquery/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://wjikai.gitee.io/myresoursce/js/bootstrap/js/bootstrap.min.js"></script>

或者

1
2
3
4
5
6
7
8
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

使用方法

1
2
3
4
5
<!-- 新 bootstrap-treeview 核心 CSS 文件 -->
<link href="https://wjikai.gitee.io/myresoursce/js/bootstrap/bootstrapvalidator/bootstrapValidator.min.css" rel="stylesheet">

<!-- 最新的 bootstrap-treeview 核心 JavaScript 文件 -->
<script src="https://wjikai.gitee.io/myresoursce/js/bootstrap/bootstrapvalidator/bootstrapValidator.min.js"></script>

调用 ：

html 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<form id = "workOrderFrom" role="form" class='form'>
    <div class="form-group" id="whetherTerminated">
        <label for="whetherTerminated" class="form-inline form-label"><span
            class="lang" data-localize="whether_terminated">是否终结:</span></label> <label
            class="radio-inline"> <input type="radio"
            name="whetherTerminated" id="processing" value="2"> 处理中
        </label> <label class="radio-inline"> <input type="radio"
            name="whetherTerminated" id="terminated" value="3"> 已终结
        </label>
    </div>
    <div class="form-group" id="handelCompany">
        <label for="handelCompany" class="form-inline form-label"><span
            class="lang" data-localize="disposal_unit">处置单位:</span></label> <label
            class="radio-inline"> <input type="radio"
            name="handelCompany" id="localization" value="1"> 属地化处置
        </label> <label class="radio-inline"> <input type="radio"
            name="handelCompany" id="operations" value="2"> 运维班组处置
        </label>
    </div>
    <div class="form-group" id="whetherDispatching">
        <label for="whetherDispatching" class="form-inline form-label"><span
            class="lang" data-localize="reassignment_or_not">是否再派工:</span></label> <label
            class="radio-inline"> <input type="radio"
            name="whetherDispatching" id="yes" value="1"> 是
        </label> <label class="radio-inline"> <input type="radio"
            name="whetherDispatching" id="no" value="0"> 否
        </label>
    </div>
    <div class="form-group" id="whetherInput">
        <label for="whetherInput" class="form-inline form-label"><span
            class="lang" data-localize="whether_input">是否录入隐患管理系统:</span></label> <label
            class="radio-inline"> <input type="radio"
            name="whetherInput" id="y" value="1"> 是
        </label> <label class="radio-inline"> <input type="radio"
            name="whetherInput" id="n" value="0"> 否
        </label>
    </div>
    <div class="form-group">
        <label for="siteInfo"><span class="lang"
            data-localize="site_info">现场信息:</span></label>
        <textarea class="form-control" name='siteInfo' id='siteInfo'></textarea>
    </div>
    <div class="form-group">
        <label for="siteHandle"><span class="lang"
            data-localize="site_disposal_measures">现场处置措施:</span></label>
        <textarea class="form-control" name='siteHandle' id='siteHandle'></textarea>
    </div>
    <div class="form-group">
        <label for="siteHandle"> <span class="lang"
            data-localize="upload_pictures">上传图片:</span>
        </label>
        <div class="filebutton">
            <span class="lang" data-localize="upload">上传</span>
            <input type="file" name="file" onchange="PreviewImage(this)" id="upload" class='fileinput-button' />
        </div>
        <div id="imgPreview" class="reader"></div>
        <input id="imgUrl" class="text" style="display:none"/>
    </div>
    <div class="form-group submit">
        <button id="cancleWorkOrder" type="button" class="btn btn-primary" id='cancle' style="dispaly:none">
            <span class="lang" data-localize="cancle_work_order">取消工单</span>
        </button>
        <button type="button" class="btn btn-primary" id='submit' >
            <span class="lang" data-localize="submit">确认提交</span>
        </button>
    </div>
</form>

js 代码 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
$(function() {
    initValidator();
});

    /**
     * 
     * <p>formSubmitValidation</p>  
     * @author wjk 
     * @date 2020-02-24
     */
 function initValidator(){
     
     $("#workOrderFrom").bootstrapValidator({
          // 默认的提示消息
          message: '不能为空',
    /* 	// 表单框里右侧的icon
          feedbackIcons: {
            　　　　　　　　valid: 'glyphicon glyphicon-ok',
            　　　　　　　　invalid: 'glyphicon glyphicon-remove',
            　　　　　　　　validating: 'glyphicon glyphicon-refresh'
          }, */
          submitHandler: function (validator, form, submitButton) {
              
          },
          fields: {
              whetherTerminated: {
                  message: '是否终结验证失败',
                  validators: {
                    notEmpty: {
                      message: '否终结不能为空'
                    },
                  }
             },
            handelCompany:{
                  message: '处置单位验证失败',
                  validators: {
                    notEmpty: {
                      message: '处置单位不能为空'
                    },
                  }
            },
            whetherDispatching:{
                  message: '是否再派工验证失败',
                  validators: {
                    notEmpty: {
                      message: '是否再派工不能为空'
                    },
                  }
            },
            whetherInput:{
                  message: '是否录入隐患系统验证失败',
                  validators: {
                    notEmpty: {
                      message: '是否录入隐患系统不能为空'
                    },
                  }
            },
            siteInfo:{
                  message: '现场信息验证失败',
                  validators: {
                    notEmpty: {
                      message: '现场信息不能为空'
                    },
                  }
            },
            siteHandle:{
                  message: '现场处理措施验证失败',
                  validators: {
                    notEmpty: {
                      message: '现场处理措施不能为空'
                    },
                  }
            }
          }
        });
     
 }
 
/**
 * 
 * <p>formSubmitValidation</p>  
 * @author wjk 
 * @date 2020-02-19
 */
function formSubmitValidation(){
   var bootstrapValidator = $("#workOrderFrom").data('bootstrapValidator');
   bootstrapValidator.validate();
    return bootstrapValidator.isValid();
}


 //最终验证调用
 if(!formSubmitValidation()){
         return;
  }
继开 wechat
欢迎加我的微信，共同交流技术